<template>
  <div class="home">
    <div class="home-item">
      <!-- 导航栏组件-->
      <HomeViewNav
        :weather="weather"
        :date="dateObj"
        :month="currentMonth"

      ></HomeViewNav>
      <!-- <button
        class="btnTime"
        @click="setDate"
      >setTime</button> -->
      <!-- 动态切换组件 -->
      <HomeViewList
        v-for="c in contentList"
        :key="c.id"
        :category="c.category"
        :itemlist="c"
        :play-status="playStatus"
        @set-play-status="setPlayStatus"
      ></HomeViewList>
    </div>
    <transition name="scroll">
      <keep-alive>
        <router-view />
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import { debounce } from "lodash-es";
import HomeViewNav from "./HomeViewNav.vue";
import HomeViewList from "./HomeViewList.vue";
import { monthEnList } from "../../utils/dateTools";

export default {
  name: "HomeView",
  props: {
     playStatus: Boolean,
  },
  data() {
    return {
      weather: {},
      contentList: [],
      // currentMonth: new Date().getMonth() + 1,
      // date: "0",
    };
  },
  created() {
    this.getDate = debounce(this.getData);
  },
  mounted() {
    this.getData();
    // console.log(this.dateObj);
  },
 
  computed: {
    date(){
      return this.$route.params.date
    },
    currentMonth() {
      let d = new Date();
      if (this.date != 0) {
        d = new Date(this.date);
      }
      return d.getMonth()+1;
    },
    dateObj() {
      let res = null;
      if (this.date) {
        let data = new Date();
        if (this.date != 0) {
          data = new Date(this.date);
        }
        let m = data.getMonth();
        res = {
          year: data.getFullYear(),
          month: monthEnList[m],
          day: data.getDate(),
        };
      }
      return res;
    },
  },
  watch:{
    date(val){
      if(!val) {
        return
      }
      this.$emit('set-date',val);
      this.getData()
    }
  },
  methods: {
    async getData() {
      let { data } = await this.$axios.get(
        `https://apis.netstart.cn/one/channel/one/${this.date}`
      );
      // console.log(data);
      // console.log(this.dateObj.day);
      this.weather = data.data.weather;
      // this.date = data.data.date;
      // console.log(this.weather);
      this.contentList = data.data.content_list;
      // console.log(this.contentList[1].category);
    },
    // setDate() {
    //   this.weather.date = "2021-08-21";
    //   console.log(this.weather.date);
    // },
    setPlayStatus(){
      this.$emit('set-play-status');
    }
  },
  components: {
    HomeViewNav,
    HomeViewList,
  },
};
</script>
<style lang="scss" scoped>
.home {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
}
.scroll-enter,
.scroll-leave-to {
  transform: translateY(-100%);
}
.scroll-enter-active,
.scroll-leave-active {
  transition: all 0.2s linear;
}
.scroll-enter-to,
.scroll-leave {
  transform: translateY(0);
}
</style>
